<template>
  <div class="header"></div>

  <div class="panel">
    <p class="panel-title">目录标题</p>
    <ul class="panel-list">
      <li v-for="(item, index) in list" :key="index">
        <div class="panel-list-title" @click="onTabChange(item, index)">
          <span>{{ item.name }}</span>
          <svg :class="['icon', item.open ? 'icons' : '']" aria-hidden="true">
            <use xlink:href="#icon-ai-arrow-down"></use>
          </svg>
        </div>
        <ul class="panel-lists" :ref="panelLists">
          <li
            class="panel-lists-item"
            v-for="(items, indexs) in item.data"
            :key="indexs"
          >
            {{ items.name }}
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
export default {
  name: "sollapse",
  setup() {
    const data = reactive({
      title: "实现折叠面板",
      list: [
        {
          name: "标题一",
          data: [{ name: "小标题" }, { name: "小标题2" }, { name: "小标题3" }],
        },
        {
          name: "标题二",
          data: [{ name: "小标题" }, { name: "小标题2" }, { name: "小标题3" }],
        },
        {
          name: "标题二",
          data: [{ name: "小标题" }, { name: "小标题2" }, { name: "小标题3" }],
        },
      ],
    });
    const refs: HTMLElement[] = [];
    const panelLists = (el: HTMLElement) => {
      refs.push(el);
    };

    interface Star {
      open: boolean;
      name: string;
      data: { name: string }[];
    }
    const onTabChange = (item: Star, index: number) => {
      // 箭头旋转
      const tabItem = item;
      data.list = data.list.map((item) => {
        return { ...item, open: false };
      });
      if (tabItem.open == undefined) {
        tabItem.open = true;
      } else {
        tabItem.open = !tabItem.open;
      }
      data.list[index] = tabItem;
      // 页面下拉
      refs.forEach((item) => {
        item.style.height = "0px";
      });
      const contentref = refs[index];
      let height = contentref.offsetHeight;

      if (height === 0) {
        // 由收缩状态展开
        contentref.style.height = "auto";
        height = contentref.offsetHeight;
        contentref.style.height = "0px";
        document.body.offsetHeight; // 必加
        contentref.style.height = height + "px";
      } else {
        // 收缩
        contentref.style.height = "0px";
      }
    };

    return {
      ...toRefs(data),
      onTabChange,
      panelLists,
    };
  },
};
</script>

<style lang="scss">
.panel {
  margin: 10px;
  width: 200px;

  &-title {
    width: 100%;
    height: 60px;
    padding: 5px 10px;
    font-size: 20px;
    border: 1px solid #666;
    text-align: left;
    line-height: 60px;
  }

  &-list {
    width: 100%;
    &-title {
      width: calc(200px - 10px);
      text-align: left;
      padding: 10px 15px;
      border: 1px solid #666;
      border-top: none;
      font-size: 18px;
      cursor: pointer;
      white-space: nowrap;
      display: flex;
      justify-content: space-between;
      align-items: center;
      svg {
        transition: all 0.3s;
      }
      &:hover {
        background-color: burlywood;
      }
      .icons {
        transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
      }
    }
  }

  &-lists {
    width: 200px;
    height: 0;
    transition: height 0.3s linear;
    overflow: hidden;
    &-item {
      width: 100%;
      text-align: left;
      padding: 5px 0;
      border: 1px solid #666;
      border-top: none;
      font-size: 16px;
      cursor: pointer;
      white-space: nowrap;
      &:hover {
        background-color: rgb(226, 132, 9);
      }
    }
  }
}
</style>